<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>this是一个代词，不同场景下指向不同的内容</p>
    <button class="btn1">按钮</button>
    <script>
        // 1. 直接写this 就指向全局的Window对象
        var name = 'gyh';
        // 2. 函数中的this 指向全局的Window对象
        function fn() {
            console.log(this.name); // gyh
        }
        fn()

        // 3.对象中的方法中的this 指向函数所在的对象
        var obj1 = {
            name: 'Mbg',
            age: 69,
            kongFu: function() {
                console.log(this);
                console.log('我在'+this.age+'岁的时候悟出了闪电五连鞭');
            },
            // 大招
            bigZhao: function() {
                console.log(this);
                var _this = this; // 保留this指向   将此时的this指向保留在_this中
                function qwe() {
                    // 4. 嵌套函数中的this不会继承上层函数的this 各是各的
                    console.log(this);
                    console.log('我在'+_this.age+'岁的时候悟出了qwerdf');
                }
                qwe()
            }
        }
        obj1.kongFu()
        obj1.bigZhao()
        // 5. 在事件处理函数中，this 表示接收事件的元素 , this指向当前dom对象
        var btn = document.getElementsByClassName('btn1')[0];
        btn.onclick = function() {
            console.log(111, this);
        }
        // 截止目前 this的指向可以总结为 谁调用函数，this就指向谁
    </script>
</body>
</html>